<template>
    <!-- Main content -->
    <div>
        <div class="row">
            <div class="col-xs-12">
                <theme-box title="意见和反馈列表">
                    <form class="form-inline" @submit.prevent v-el:form>
                        <form-select title="意见类型" :up-table="true" :options="typeOptions" name="type"
                                     :sreach="true"></form-select>
                        <form-select title="处理状态" :up-table="true" :options="stateOptions" name="stat"
                                     :sreach="true"></form-select>
                        <form-date-time title="更新日期" :up-table="true" name="crtTime"></form-date-time>
                        <div style="float:right;margin-top:5px!important" class="button">
                            <button type="reset" @click="reset" class="btn btn-warning pull-right">重置</button>
                            <v-button theme="primary" @click="search" class="pull-right">查询</v-button>
                        </div>

                    </form>
                    <table class="table table-bordered table-striped" style="width:100%" v-el:table>
                    </table>
                </theme-box>
            </div>
            <!-- /.col -->
        </div>

        <modal-container title="处理方式" v-el:review-modal v-ref:review-modal class="edit-modal" theme="small_window">
            <form @submit.prevent @reset.prevent v-el:review-mform>
                <div class="modal-body">
                    <table-modal :item="item" :columns-set="columnsReviewSet" :columns-num="1"></table-modal>
                    <span style="margin-left:3%"><span class="required">*</span>处理方式</span>
                    <span style="margin-left:18%"><input type="radio" name="radio" value="" id="noPass"/>不录用</span>
                    <span style="margin-left:15%"><input type="radio" name="radio" value="" id="pass"/>录用</span>
                </div>
                <div class="modal-footer">
                    <v-button data-dismiss="modal" @click="resetBindDrag">关闭</v-button>
                    <v-button theme="primary" type="submit">提交</v-button>
                </div>
            </form>
        </modal-container>
        <!-- /.row -->
        <div class="modal" id="modal">
            <span class="close" id="close">×</span>
            <img class="modalImg" id="modalImg">
        </div>
    </div>
    <!-- /.content -->
</template>

<style lang="less" scoped>
    .form-inline .btn + .btn {
        margin-right: 10px;
    }
    /*.form-inline .form-group+.form-group {*/
    /*margin-left: 20px;*/
    /*}*/
</style>
<style>
    .form-inline #mchtstat .control-label {
        margin-left: 0% !important;
    }

    #modal{
        display: none;/*隐藏*/
        width: 100%;
        height: 100%;
        position: fixed;
        overflow: auto;
        background-color: rgba(0,0,0,0.7);
        top:50px;
        left: 0px;
        z-index: 1;
    }
    #modalImg{
        display: block;
        margin:25px auto;
        width: 60%;
        max-width: 750px;
    }
    .close{
        font-size: 40px;
        font-weight: bold;
        position: absolute;
        top: 20px;
        right: 14%;
        color:#fff;
    }
    .close:hover,
    .close:focus{
        color:#ff5500;
        cursor:pointer;
    }
    .red{background-color:red;}
</style>

<script>
    import {
        dateTime,
        createDataTable
    } from 'ui/collections/general.js'
    var serialize = require('form-serialize');
    import {dateFormat} from "lib/method.js";

    var dataTable;
    var columnsSet;
    export default {
        data: () => ({
            _array: [],
            item: {},
            columnsSet: [],
            mchtType: [],
            typeOptions: [{
                key: "所有问题",
                value: ""
            }, {
                key: "商户问题",
                value: "mcht"
            }, {
                key: "账号问题",
                value: "account"
            }, {
                key: "支付问题",
                value: "pay"
            }, {
                key: "其他问题",
                value: "other"
            }],
            stateOptions: [{
                key: "所有状态",
                value: ""
            }, {
                key: "待处理",
                value: "0"
            }, {
                key: "已处理",
                value: "1"
            }, {
                key: "已录用",
                value: "2"
            }],
            columnsReviseSet: [],
            columnsReviewSet: [{
                title: "问题描述",
                data: "dsc",
                edit: true,
                readonly: true,
                className: "operate",
            }, {
                title: "解决方案",
                data: "solution",
                edit: true,
                className: "operate"
            }],

        }),
        methods: {
            //还原弹出框位置
            resetBindDrag() {
                this.$refs.reviewModal._resetBindDrag();
            },
            //查询按钮
            search: function () {
                dataTable.ajax.reload();
            },
            //重置按钮
            reset: function () {
                $(".form-inline")[0].reset();
                dataTable.ajax.reload();
            }
        },
        created() {
            columnsSet = [{
                title: "问题类型",
                data: "type",
                className: "operate",
                render: function (data) {
                    var value;
                    if (data == "mcht") {
                        value = '商户问题'
                    } else if (data == "account") {
                        value = '账号问题'
                    } else if (data == "pay") {
                        value = '支付问题'
                    } else {
                        value = "其它问题"
                    }
                    return value;
                }
            }, {
                title: "问题描述",
                data: "dsc",
                className:"wrap-width",
            }, {
                title: "凭证图片",
                data: "picUrl",
                className: "operate pic",
                render: function (data) {
                    var imgs = "";
                    if(data == null){
                    }else{
                        for (var i = 0; i < data.length; i++) {
                            imgs += `<img class="table-avatar picture" src=` + data[i] + `>`;
                        }
                    }
                    return imgs;
                }
            }, {
                title: "反馈方(芸券账号)",
                data: "usrId",
                className: "operate",
            }, {
                title: "联系电话",
                data: "mobileNo",
                className: "operate",
            }, {
                title: "解决方案",
                data: "solution",
                className: "operate",
            }, {
                title: "处理状态",
                data: "stat",
                className: "operate",
                render: function (data) {
                    var value;
                    if (data == "0") {
                        value = '待处理'
                    } else if (data == "1") {
                        value = '已处理'
                    } else {
                        value = "已录用"
                    }
                    return value;
                }
            }, {
                title: "更新时间",
                data: "updTime",
                className: "operate",
            }, {
                title: "相关操作",
                className: "operate",
                width: "160px",
                render: function (value, type, row) {
                    if (row.stat == "0") {
                        return `
                    <button type="button" class="btn btn-danger btn-sm review">解决</button>
                `
                    } else {
                        return ``
                    }
                }
            }];
        },
        ready: async function () {
            dateTime({
                format: "yyyy-mm-dd",
                minView: "2",
                startDate: "",
                endDate: ""
            })
            this.$set("columnsSet", columnsSet)
            var self = this;
            //创建dataTable
            dataTable = $(this.$els.table).DataTable({
                "columns": this.columnsSet, //定义列
                "ajax": async function (data, callback, settings) {
                    var page = [{
                        "name": "iDisplayStart",
                        "value": 1 + data.start / data.length
                    }, {
                        "name": "iDisplayLength",
                        "value": data.length
                    }];
                    //表单序列化数据
                    var _data = serialize(self.$els.form, {
                        hash: true,
                        disabled: true,
                        empty: true
                    });
                    _data.aoData = JSON.stringify(page);
                    //点击图片变大图
                    var modal = document.getElementById('modal');
                    var modalImg = document.getElementById("modalImg");
                    $('tbody').on('click','tr td:nth-child(3) img',function(){
                        var imgs = $('tbody tr td:nth-child(3) img');
                        var index = $(this).index();
                        $('#modalImg').attr('src',imgs[index].src);
                        modal.style.display="block";
                    })
                    var close = document.getElementById("close");
                    close.onclick=function(){
                        modal.style.display="none";
                    }
                    //对处理日期进行数据处理
                    _data.crtTime = _data.crtTime.replace(/-/g, "");
                    //发送请求
                    var result = await self.$post({
                        url: "/api/v1" + projectName_Url + "/plat/feed/query",
                        data: _data,
                        method: "POST"
                    })
                    if (result.respCode != "00") {
                        Midway.alert({
                            title: "操作失败",
                            content: result.content
                        })
                    }
                    callback({
                        recordsTotal: result.content.total,
                        recordsFiltered: result.content.total,
                        data: result.content.list || []
                    })
                }
            });

            $(self.$el).on("click", ".review", function () {
                var Row = $(this).closest('tr').get(0);
                const dataArray = JSON.parse(JSON.stringify(dataTable.row(Row).data()));
                self.item = dataArray;
                dateTime()
                //点击审核  让第二行隐藏
                $(".modal-body .dataTable tbody tr:nth-child(2)").css("display", "none");
                //点击通过 让第二行显示
                $("#pass").click(function () {
                    $(".modal-body .dataTable tbody tr:nth-child(2)").css("display", "table-row");
                })
                //点击不通过 让第二行不显示
                $("#noPass").click(function () {
                    $(".modal-body .dataTable tbody tr:nth-child(2)").css("display", "none");
                    $(".modal-body .dataTable tbody tr:nth-child(2)").value ="";
                })

                var stat;
                $(".modal-body span input").click(function () {
                    if ($("#noPass").prop("checked")) {
                        stat = 0;
                    }
                    if ($("#pass").prop("checked")) {
                        stat = 1;
                    }
                })
                //点击关闭 审核方式清空
                $(".modal-footer .btn.btn-default").click(function () {
                    $("#noPass").prop("checked", false);
                    $("#pass").prop('checked', false);
                    self.resetBindDrag()
                });
                //审核验证、保存、提交
                $(self.$els.reviewMform).validate(self.item.valdate = {
                    async submitHandler() {
                        var form = self.$els.reviewMform;
                        var _data = serialize(form, {hash: true, disabled: true, empty: true});
                        //判断单选框必须有一个被选中
                        var radios = $("input[name = 'radio']");
                        for (var i = 0; i < radios.length; i++) {
                            if ($("#noPass").is(":checked") || $("#pass").is(":checked")) {

                            }
                            else {
                                Midway.alert({title: "操作提示", content: '问题还没有处理'});
                                return;
                            }
                        }
                        var oprId = JSON.parse(localStorage.getItem("id_token")).oprId;
                        _data.oprId = oprId;
                        _data.stat = stat
                        var result = await self.$post({
                            url: "/api/v1" + projectName_Url + "/plat/feed/handle/" + self.item.id,
                            data: _data,
                            method: "post"
                        }).then(response => {
                            let content = response.content;
                            let local = {
                                token: content.token,
                                usrName: content.usrName,
                                roleId: content.roleId,
                            };
                            localStorage.setItem("oprId", JSON.stringify(local.roleId));
                            self.$route.router.go('/feedOpi/list');
                        }, error => {

                        });
//                        Midway.alert({title: "操作提示", content: result.errorInfo})
                        dataTable.ajax.reload(null, false);
                        self.resetBindDrag();
                        $(self.$els.reviewModal).modal('hide');

                    },
                    rules: {
                        mchtName: {
                            required: true,
                            stringMaxLength: 64,
                            readonly: true,
                            disabled: true

                        },
                        solution: {
                            required: true,
                            stringMaxLength: 64
                        },
                        stat: {
                            required: true
                        }
                    }
                });
                $(self.$els.reviewModal).modal('show');
            });
        },
    }
</script>
